import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByButton from "@/components/ui/ByButton";
import FormInput from "@/components/common/FormInput";
import PopupContainer from "@/components/app/PopupContainer";

import useForm from "@/hooks/useForm";
import ApiBudget from "@/api/budget";

export default ({
  billDetailId,
  onCancel,
  onSuccess,
}: {
  billDetailId: number;
  onSuccess: () => void;
  onCancel: () => void;
}) => {
  const { loading, model, setModel, submit } = useForm(
    ApiBudget.materialConfirmDelay,
    {
      defaultModel: { billDetailId, workCheckedDelayReason: "" },
      rules: {
        workCheckedDelayReason: { required: true, message: "请输入延迟原因" },
      },
      onSuccess() {
        Taro.showToast({ title: "操作成功！" });
        onSuccess();
      },
    }
  );

  return (
    <PopupContainer title="延迟确认" onCancel={onCancel}>
      <View className="p-3">
        <ByCell label="延迟原因" vertical>
          <FormInput
            type="textarea"
            placeholder="输入延迟原因"
            value={model.workCheckedDelayReason}
            onChange={(e) => setModel({ workCheckedDelayReason: e })}
          />
        </ByCell>
      </View>

      <ByButton
        size="large"
        loading={loading}
        className="w-2/3 my-3"
        onClick={() => submit()}
      >
        提交
      </ByButton>
    </PopupContainer>
  );
};
